<template>
  <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="tabClick">
    <el-tab-pane v-for="(item, index) in activeMenu" :key="index" :label="item.name" :name="item.name">
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'tabMenu',
  data () {
    return {
      editableTabsValue: '首页'
    }
  },
  computed: {
    ...mapGetters(['activeMenu'])
  },
  watch: {
    $route () {
      this.editableTabsValue = this.$route.name
      this.$store.commit('SET_ACTIVE', this.$route)
    },
    immediate: true
  },
  methods: {
    removeTab (targetName) {
      if (this.activeMenu.length <= 1) {
        this.$message({
          type: 'info',
          message: '最少保留一个菜单'
        })
        return
      }

      const current = this.activeMenu.find(item => item.name === targetName)
      const index = this.activeMenu.findIndex(item => item.path === current.path)
      if (index === 0) {
        this.$message({
          type: 'info',
          message: '禁止删除首页'
        })
        return
      }
      if (current.path === this.$route.path) {
        this.$router.push({
          path: this.activeMenu[index - 1].path
        })
      }
      this.$store.commit('REMOVE_ACTIVE_MENU', targetName)
    },
    tabClick (data) {
      const current = this.activeMenu.find(item => item.name === data.name)
      this.$router.push({
        path: current.path
      })
    }
  }
}
</script>
<style lang="less">
.el-tabs__header {
  margin: 0!important;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
}

.el-tabs__item.is-active {
  background: #334157;
  color: white!important;
  border-bottom-color: #334157!important;
  border-left-color:#334157!important;
}
.el-tabs__item {
  background: #ededed;
}
.el-tabs--card>.el-tabs__header .el-tabs__nav {
  border: none!important;
}
.el-tabs__nav-next, .el-tabs__nav-prev {
  line-height: 40px!important;
  background: #409EFF;
  color: white!important;
  width: 20px;
  text-align: center;
  i {
    font-weight: bold;
    font-size: 16px;
  }
}
</style>
